<script setup>
import router from "@/router/index.js"
import {getReceiveStatusStyle, getUrgencyStyle} from "@/utils/document.js";
import {QuestionFilled} from "@element-plus/icons-vue";
import {getDocReceivePageList, getDocReceiveImage} from "@/api/document/exchangeDocument.js";
import useLoginUserStore from "@/store/modules/user.js";
import {onActivatedFunctions, tableFunctions} from "@/utils/common.js";
import ListQueryToolbar from "@/components/ListQueryToolbar/ListQueryToolbar.vue";
import ImagePreview from "@/components/ImagePreview/index.vue";
import useAppStore from "@/store/modules/app.js";

const device = computed(() => useAppStore().device);
const {proxy} = getCurrentInstance()
const {urgency, secretLevel, docReceiveStatus} = proxy.useDict(["urgency", true], ["secretLevel", true], ["docReceiveStatus", true])
const uniqueId = ref("")
const receiveDocumentList = ref([])
const loading = ref(false)
const showSearch = ref(true)
const total = ref(0)
const loginUserStore = useLoginUserStore()
const loginUserId = loginUserStore.id
// 列显隐信息
const columns = ref({
  subject: {key: 'subject', label: `发文标题`, visible: true},
  docNo: {key: 'docNo', label: `发文字号`, visible: true},
  urgency: {key: 'urgency', label: `紧急程度`, visible: true},
  secretLevel: {key: 'secretLevel', label: `密级`, visible: false},
  sendUnit: {key: 'sendUnit', label: `发文单位`, visible: true},
  sendUserName: {key: 'sendUserName', label: `发文用户`, visible: true},
  receiveTime: {key: 'receiveTime', label: `收文时间`, visible: true},
  receiveDeptName: {key: 'receiveDeptName', label: `收文单位`, visible: true},
  receiveUserName: {key: 'receiveUserName', label: `收文用户`, visible: true},
  receiveSource: {key: 'receiveSource', label: `收文来源`, visible: false},
  status: {key: 'status', label: `签收状态`, visible: true},
  confirmReceiveTime: {key: 'confirmReceiveTime', label: `签收时间`, visible: true},
  docImage: {label: `正文截图`, visible: true},
})
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    orderField: '',
    orderRule: '',
    sendTimeRange: [],
    sendUserName: undefined,
    subject: undefined,
    urgency: '',
    secretLevel: '',
    sendUnit: undefined,
    docNo: undefined,
    receiveUserName: undefined,
    receiveDeptName: undefined,
    status: ''
  }
})
const {queryParams} = toRefs(data)
const {tableSort} = tableFunctions(queryParams, getList)

onMounted(() => {
  getList()
})

onActivatedFunctions(getList, uniqueId)

function getList() {
  loading.value = true
  function loadListData(res) {
    loading.value = false
    receiveDocumentList.value = res.list
    total.value = res.total
  }
  getDocReceivePageList(proxy.addDateRange(queryParams.value, 'sendTime', true)).then(res => {
    loadListData(res)
  })
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef")
  queryParams.value.sendTimeRange = []
  queryParams.value.orderField = ''
  queryParams.value.orderRule = ''
  proxy.$refs.tableRef?.clearSort()
  handleQuery()
}

defineExpose({
  resetQuery
})

const isLoadMoreQueryParams = ref(false)
const setLoadMoreQueryParams = (isLoadMoreQuery) => {
  isLoadMoreQueryParams.value = isLoadMoreQuery
}

/** 修改操作 */
function handleUpdate(row) {
  const id = row.id
  router.push({ path: "/document/exchange/receive/view/" + id, query: {customTitle: '单位收文 - ' + row.subject, status: '收文'}})
}

</script>

<template>
  <el-row>
    <el-col :span="24">
      <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="auto" label-position="top" style="width: 100%;">
        <el-row :gutter="10" v-show="showSearch">
          <el-col :span="6" :xs="24">
            <el-form-item label="发文标题" prop="subject">
              <el-input
                  v-model="queryParams.subject"
                  placeholder="发文标题"
                  clearable
                  :style="device==='mobile' ? 'width: 300px' : 'width: 320px'"
                  @keyup.enter="handleQuery"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24">
            <el-form-item label="签收状态" prop="status">
              <el-select
                  v-model="queryParams.status"
                  placeholder="公文签收状态"
                  clearable
                  :style="device==='mobile' ? 'width: 300px' : 'width: 320px'"
                  :empty-values="[null, undefined]"
              >
                <el-option
                    v-for="item in docReceiveStatus"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24">
            <el-form-item label="收文单位" prop="receiveDeptName">
              <el-input
                  v-model="queryParams.receiveDeptName"
                  placeholder="收文单位名称"
                  clearable
                  :style="device==='mobile' ? 'width: 300px' : 'width: 320px'"
                  @keyup.enter="handleQuery"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24">
            <el-form-item label="收文用户" prop="receiveUserName">
              <el-input
                  v-model="queryParams.receiveUserName"
                  placeholder="收文用户姓名"
                  clearable
                  :style="device==='mobile' ? 'width: 300px' : 'width: 320px'"
                  @keyup.enter="handleQuery"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24" v-if="isLoadMoreQueryParams">
            <el-form-item label="发文字号" prop="docNo">
              <el-input
                  v-model="queryParams.docNo"
                  placeholder="发文字号"
                  clearable
                  :style="device==='mobile' ? 'width: 300px' : 'width: 320px'"
                  @keyup.enter="handleQuery"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24" v-if="isLoadMoreQueryParams">
            <el-form-item label="发文日期" :style="device==='mobile' ? 'max-width: 300px' : 'max-width: 320px'">
              <el-date-picker
                  v-model="queryParams.sendTimeRange"
                  value-format="YYYY-MM-DD"
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24" v-if="isLoadMoreQueryParams">
            <el-form-item label="发文单位" prop="sendUnit">
              <el-input
                  v-model="queryParams.sendUnit"
                  placeholder="发文单位名称"
                  clearable
                  :style="device==='mobile' ? 'width: 300px' : 'width: 320px'"
                  @keyup.enter="handleQuery"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24" v-if="isLoadMoreQueryParams">
            <el-form-item label="发文用户" prop="sendUserName">
              <el-input
                  v-model="queryParams.sendUserName"
                  placeholder="发文用户姓名"
                  clearable
                  :style="device==='mobile' ? 'width: 300px' : 'width: 320px'"
                  @keyup.enter="handleQuery"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24" v-if="isLoadMoreQueryParams">
            <el-form-item label="紧急程度" prop="urgency">
              <el-select
                  v-model="queryParams.urgency"
                  placeholder="紧急程度"
                  clearable
                  :style="device==='mobile' ? 'width: 300px' : 'width: 320px'"
                  :empty-values="[null, undefined]"
              >
                <el-option
                    v-for="item in urgency"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24" v-if="isLoadMoreQueryParams">
            <el-form-item label="密级" prop="secretLevel">
              <el-select
                  v-model="queryParams.secretLevel"
                  placeholder="密级"
                  clearable
                  :style="device==='mobile' ? 'width: 300px' : 'width: 320px'"
                  :empty-values="[null, undefined]"
              >
                <el-option
                    v-for="item in secretLevel"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-row :gutter="10" class="mb10">
        <ListQueryToolbar :isShowQueryParams="showSearch" isShowLoadMore :isLoadMoreQueryParams="isLoadMoreQueryParams"
                          @handleQuery="handleQuery" @resetQuery="resetQuery" @setLoadMoreQueryParams="setLoadMoreQueryParams"/>
        <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns" v-show="total > 0"
                       :class="{'mt10': device==='mobile'}"/>
      </el-row>
      <el-table ref="tableRef" v-loading="loading" :data="receiveDocumentList" :scrollbar-always-on="(receiveDocumentList != null) && (receiveDocumentList.length > 0)"
                @sort-change="tableSort">
        <el-table-column :label="columns.subject.label" key="subject" prop="subject" v-if="columns.subject.visible" min-width="250" :show-overflow-tooltip="true"
                         sortable="custom">
          <template #default="scope">
            <el-link @click="handleUpdate(scope.row)" type="primary">
              {{scope.row.subject}}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column :label="columns.docNo.label" key="docNo" prop="docNo" v-if="columns.docNo.visible" width="190" sortable="custom" />
        <el-table-column :label="columns.urgency.label" key="urgency" prop="urgency" v-if="columns.urgency.visible" width="100" sortable="custom">
          <template #default="scope">
            <el-text :type="getUrgencyStyle(scope.row.urgencyDescription)"> {{ scope.row.urgencyDescription }} </el-text>
          </template>
        </el-table-column>
        <el-table-column :label="columns.secretLevel.label" key="secretLevel" prop="secretLevel" v-if="columns.secretLevel.visible" width="85" sortable="custom"/>
        <el-table-column :label="columns.sendUnit.label" key="sendUnit" prop="sendUnit" v-if="columns.sendUnit.visible" width="200" :show-overflow-tooltip="true" sortable="custom"/>
        <el-table-column :label="columns.sendUserName.label" key="sendUserName" prop="sendUserName" v-if="columns.sendUserName.visible" width="130" :show-overflow-tooltip="true" sortable="custom" />
        <el-table-column :label="columns.receiveTime.label" key="receiveTime" prop="receiveTime" v-if="columns.receiveTime.visible" width="180" sortable="custom"/>
        <el-table-column :label="columns.receiveDeptName.label" key="receiveDeptName" prop="receiveDeptName" v-if="columns.receiveDeptName.visible" width="150" :show-overflow-tooltip="true" sortable="custom" />
        <el-table-column :label="columns.receiveUserName.label" key="receiveUserName" prop="receiveUserName" v-if="columns.receiveUserName.visible" width="130" :show-overflow-tooltip="true" sortable="custom" >
          <template #default="scope">
            <el-text :type="scope.row.receiveUserId===loginUserId?'success':''"> {{ scope.row.receiveUserName }} </el-text>
          </template>
        </el-table-column>
        <el-table-column :label="columns.receiveSource.label" key="receiveSource" prop="receiveSource" v-if="columns.receiveSource.visible" width="100" sortable="custom" />
        <el-table-column :label="columns.status.label" key="status" prop="status" v-if="columns.status.visible" width="100" sortable="custom" >
          <template #default="scope">
            <el-tag :type="getReceiveStatusStyle(scope.row.status)"> {{ scope.row.status }} </el-tag>
          </template>
        </el-table-column>
        <el-table-column :label="columns.confirmReceiveTime.label" key="confirmReceiveTime" prop="confirmReceiveTime" v-if="columns.confirmReceiveTime.visible" width="180" sortable="custom" />
        <el-table-column :label="columns.docImage.label" v-if="columns.docImage.visible" width="100" align="center">
          <template #header="scope">
            <el-tooltip effect="dark" content="拟稿人在我的公文模块中，手动保存过正文后，才会生成正文首页的截图" placement="top">
            <span style="display: inline-flex; align-items: center;">
              {{columns.docImage.label}}
              <el-icon color="#409efc" style="font-size: 18px; margin-left: 2px;"><QuestionFilled/></el-icon>
            </span>
            </el-tooltip>
          </template>
          <template #default="scope">
            <ImagePreview :download-name="`${scope.row.subject}.jpg`" :queryParams="scope.row.id" :getImageApi="getDocReceiveImage"/>
          </template>

        </el-table-column>
      </el-table>
      <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
      />
    </el-col>
  </el-row>  
</template>